<template>
    <div class="city-content" ref="cityContent">
        <div>
            <div class="city-hot">
                <div class="city-hot-title title">
                    热门城市
                </div>
                <div class="city-hot-content">
                    <ul class="clearfix">
                        <li 
                            v-for="(item,index) of hotCitys" 
                            :key="index"
                            @click="handleClickCity(item.name,$event)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="alphabet-menu" @click="alphabetEvnet($event)">
                <div class="city-hot-title title"  >
                    字母排序
                </div>
                <ul class="clearfix">
                    <li v-for="(item,index) of getAlphabetMenu()" :key="index">{{ item }}</li>
                </ul>
            </div>
            <div class="alphabet-city">
                <template v-for="(value,key) in citys">
                    <div class="alphabet-city title" :ref="key">
                        {{ key }}
                    </div>
                    <ul class="clearfix">
                        <li v-for="item of value" @click="handleClickCity(item,$event)">
                            {{ item }}
                        </li>
                    </ul>
                </template>
            </div>
        </div>
        
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name: 'CityContent',
    props: {
        hotCitys: Array,
        citys: Object
    },
    data(){
        return{
            letter: ''
        }
    },
    methods:{
        getAlphabetMenu(){
            return Object.keys(this.citys);
        },
        alphabetEvnet(event){
            if(event.target.tagName.toLowerCase() == 'li'){
                this.letter = event.target.innerHTML;
            }
        },
        handleClickCity(city,e){
            if(e.target.tagName.toLowerCase() == 'li'){
                this.$store.dispatch('changeCityName',city);
                this.$router.push('/');
            }
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.cityContent,{
                click: true,
                scrollY: true
            });
        })
    },
    watch: {
        letter(){
            this.scroll.scrollToElement(this.$refs[this.letter][0]);
        }
    }
}
</script>

<style scoped>
    div{
        box-sizing: border-box;
    }

    ul li{
        float: left;
        height: .88rem;
        line-height: .88rem;
        text-align: center;
    }

    .title{
        width: 100%;
        height: .64rem;
        line-height: .64rem;
        padding-left: .1rem;
        background-color: #eee;
    }

    .city-content{
        position: relative;
        top: .88rem;
        width: 100%;
        height: calc(100% - .88rem);
        overflow: hidden;
    }

    .city-hot-content ul{
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
    }

    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }

    .city-hot-content li{
        width: 33%;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .alphabet-menu ul li{
        float: left;
        width: 16%;
    }

    .alphabet-city ul{
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
    }

    .alphabet-city ul li{
        width: 24.7%;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
</style>